<template>
  <div 
    :class="spinnerClasses"
    role="status"
    :aria-label="ariaLabel"
  >
    <svg
      :class="svgClasses"
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
    >
      <circle
        :class="circleClasses"
        cx="12"
        cy="12"
        r="10"
        stroke="currentColor"
        stroke-width="4"
      ></circle>
      <path
        :class="pathClasses"
        fill="currentColor"
        d="m4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
      ></path>
    </svg>
    <span v-if="showText" class="ml-2 text-sm">{{ text }}</span>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

export interface LoadingSpinnerProps {
  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
  color?: 'primary' | 'secondary' | 'white' | 'gray'
  text?: string
  showText?: boolean
  ariaLabel?: string
}

const props = withDefaults(defineProps<LoadingSpinnerProps>(), {
  size: 'md',
  color: 'primary',
  text: '加载中...',
  showText: false,
  ariaLabel: '正在加载'
})

// 尺寸样式
const sizeClasses = computed(() => {
  const sizes = {
    xs: 'w-3 h-3',
    sm: 'w-4 h-4',
    md: 'w-6 h-6',
    lg: 'w-8 h-8',
    xl: 'w-12 h-12'
  }
  return sizes[props.size]
})

// 颜色样式
const colorClasses = computed(() => {
  const colors = {
    primary: 'text-primary-500',
    secondary: 'text-gray-500',
    white: 'text-white',
    gray: 'text-gray-400'
  }
  return colors[props.color]
})

// 容器样式
const spinnerClasses = computed(() => [
  'inline-flex items-center',
  colorClasses.value
])

// SVG样式
const svgClasses = computed(() => [
  sizeClasses.value,
  'animate-spin'
])

// 圆圈样式
const circleClasses = computed(() => [
  'opacity-25'
])

// 路径样式
const pathClasses = computed(() => [
  'opacity-75'
])
</script>

<style scoped>
/* 确保动画平滑 */
.animate-spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>
